<template>
  <a-modal
    :title="formInfo.id==undefined?'新增':'修改'"
    :width="800"
    :visible="visible"
    :confirmLoading="confirmLoading"
    :destroyOnClose="true"
    @ok="handleSubmit"
    @cancel="handleCancel"
    cancelText="关闭"
  >
    <a-spin :spinning="confirmLoading">
      <a-form-model
        ref="ruleForm"
        :model="formInfo"
        :label-col="$global.labelCol"
        :wrapper-col="$global.wrapperCol"
      >
        <a-row>
          <a-col :span="12">
            <a-form-model-item
              label="名称"
              prop="name"
              :rules="$valid.required"
              :maxLength="50">
              <a-input v-model="formInfo.name" placeholder="请输入名称"/>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item
              label="排序"
              prop="sortn"
              :rules="[$valid.required,$valid.numRules]"
              :maxLength="50"
              :label-col="$global.labelTextAreaCol"
              :wrapper-col="$global.wrapperTextAreaCol">
              <a-input v-model="formInfo.sortn" placeholder="请输入排序(从大到小)"/>
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="24">
            <a-form-model-item
              label="链接"
              prop="linkUrl"
              :rules="$valid.required"
              :label-col="$global.labelTextAreaCol"
              :wrapper-col="$global.wrapperTextAreaCol">
              <a-input v-model="formInfo.linkUrl" placeholder="请输入链接"/>
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row>
          <a-form-model-item
            label="图片"
            prop="rollPic"
            :label-col="$global.labelTextAreaCol"
            :wrapper-col="$global.wrapperTextAreaCol">
            <w-image-upload
              class="avatar-uploader"
              text="上传"
              v-model="formInfo.rollPic"
              bizPath="rollPic"></w-image-upload>
          </a-form-model-item>
        </a-row>
      </a-form-model>
    </a-spin>
  </a-modal>
</template>

<script>
import { getAction, postAction } from '@/api/manage'
import WImageUpload from '@/components/WxImageUpload/WImageUpload'

export default {
  name: 'RollPicEdit',
  components: {
    WImageUpload
  },
  data () {
    return {
      visible: false,
      confirmLoading: false,
      formInfo: {
        name: undefined,
        createTime: undefined,
        sortn: undefined,
        linkUrl: undefined,
        rollPic: undefined,
        wx: ''
      },
      url: {
        saveInfo: '/system/rollPic/save',
        getInfo: '/system/rollPic/info'
      }
    }
  },
  created () {
  },
  methods: {
    add () {
      this.edit()
    },
    edit (record) {
      this.$objToOverride(this.formInfo, record)
      if (this.formInfo.id) {
        getAction(this.url.getInfo, { id: record.id }).then(res => {
          this.$nextTick(() => {
            this.formInfo = res.result.data
          })
        })
      }
      this.visible = true
    },
    // 确定
    handleSubmit () {
      // 触发表单验证
      this.confirmLoading = true
      this.$refs.ruleForm.validate(valid => {
        console.log(valid)
        if (valid) {
          postAction(this.url.saveInfo, this.formInfo).then(res => {
            this.$message.success(res.content)
            this.$emit('ok', this.formInfo)
            this.close()
          }).finally(() => {
            this.confirmLoading = false
          })
        } else {
          this.confirmLoading = false
        }
      })
    },
    // 关闭
    handleCancel () {
      this.close()
    },
    close () {
      this.$refs.ruleForm.resetFields()
      this.$objToReset(this.formInfo)
      this.$emit('close')
      this.visible = false
    },
    editorOk (val) {
      this.formInfo.content = val
    }
  }
}
</script>
